同时调试 PHP 和 JavaScript 代码

Web 应用程序通常由 PHP 和 JavaScript 代码组成：PHP 代码在服务器端运行，而 JavaScript 在浏览器中运行。使用 PhpStorm，您可以轻松调试 PHP 代码以检查服务器上发生的情况、修改变量等。我们还可以通过从 IDE 启动 JavaScript 调试会话来调试在浏览器中运行的 JavaScript。

本教程概述了如何在 PhpStorm 中同时调试 PHP 和 JavaScript 代码。

在开始调试之前，请确保已正确安装和配置调试引擎。PhpStorm 支持使用两种最流行的工具进行调试：Xdebug和Zend Debugger。这些工具不能同时使用，因为它们相互阻挡。为避免此问题，您需要更新php.ini文件中的相应部分，如配置 Xdebug和配置 Zend Debugger中所述。

在编辑器中打开活动的php.ini文件：

在“设置/首选项”对话框 ( Ctrl+Alt+S) 中，单击PHP。

在打开的PHP页面上，单击CLI Interpreter字段旁边的。

在打开的CLI 解释器对话框中，配置文件只读字段显示活动php.ini文件的路径。单击在编辑器中打开。

接下来，安装PhpStorm 调试小书签或浏览器调试扩展之一，以及JetBrains Chrome 扩展扩展，如HTML、CSS 和 JavaScript 中的实时编辑中所述。

在 PhpStorm 中，通过单击工具栏或选择Run |启用侦听传入调试连接。在主菜单中开始侦听 PHP 调试连接。这将确保 PhpStorm 在启动调试会话时做出反应并自动打开调试工具窗口。在启动脚本之前，请确保设置了断点，或者在Settings/Preferences对话框的Debug页面上启用了Break at first line in PHP scripts选项。Ctrl+Alt+S

根据您的偏好或应用程序要求，您可以使用 PhpStorm 的内置网络服务器在本地运行我们的应用程序，或使用在本地或远程计算机上运行的任何其他网络服务器。

PhpStorm 中的 JavaScript 调试器可以从编辑器或Project 工具窗口通过Debug |启动。上下文菜单命令。如果所选文件是 PHP 文件，则有两个条目可用。选择第一个标有 的很重要，它将启动 JavaScript 调试器。

一旦开始，我们可以在 JavaScript 代码中放置断点并使用 JavaScript 调试器。

当使用本地 Web 服务器（例如 Apache 或 Nginx）时，或者在远程 Web 服务器、Vagrant或Docker机器上进行开发时，我们可以使用运行/调试配置启动 JavaScript 调试器。

执行以下任一操作：

在 PhpStorm 工具栏上选择编辑配置

选择运行 | 从主菜单编辑配置。

在打开的运行/调试配置对话框中，单击工具栏并添加新的JavaScript 调试配置。

输入我们要在 Web 服务器上调试的页面的完整 URL。或者，提供一些映射，以便 PhpStorm 可以确定在哪里可以找到相对于远程 URL 的本地文件。仅当我们在本地和远程服务器上具有不同的项目结构时才需要这样做。请注意，如果您使用 PhpStorm 部署 PHP 应用程序，映射将从部署配置中重用。

创建配置后，您可以从 PhpStorm 工具栏启动 JavaScript 调试会话：

我们将遵循零配置调试方法。在浏览器中，我们可以使用PhpStorm 调试小书签或浏览器调试扩展之一来启动 PHP 调试会话。这将指示 PHP 服务器连接到 PhpStorm 并打开调试器。请注意，IDE 最初可能会要求您提供必要的路径映射。附加调试器后，我们将能够同时调试 JavaScript 和 PHP。PhpStorm 将根据需要在调试器之间切换。

在前面的步骤中，我们分别启动了 JavaScript 和 PHP 调试器。使用 Xdebug 时，我们可以将XDEBUG_SESSION_STARTURL 参数传递给我们的服务器，以同时启动 PHP 调试和 JavaScript 调试。我们可以使用自定义的运行/调试配置来做到这一点。像之前一样创建运行/调试配置，并确保附加XDEBUG_SESSION_START=some-session-nameURL 参数，例如 ?XDEBUG_SESSION_START=phpstorm：

目前，不支持在一个文件中同时设置 PHP 和 JavaScript 断点。例如，以下代码中不能设置 JavaScript 断点：

为了能够同时调试 PHP 和 JavaScript 代码，请将 JavaScript 代码移动到单独的.js文件中并从 HTML 中引用它：

然后我们可以在php文件中放置 PHP 断点，并在js文件中设置 JavaScript 断点。